<template>
  <div
      class="extend1"
      :style="{
      height: compData.style.height + 'px',
      'border-top-left-radius': compData.data.borderRadiusTop + 'px',
      'border-top-right-radius': compData.data.borderRadiusTop + 'px',
      'border-bottom-left-radius': compData.data.borderRadiusBottom + 'px',
      'border-bottom-right-radius': compData.data.borderRadiusBottom + 'px',
    }"
  >
    <div class="box sa-flex" style="height: 110px;">
		<div class="box-item sa-flex-1 sa-flex-col sa-col-center">
			<sa-image :url="compData.data?.left?.src" fit="contain" radius="0" :suffix="null" style="width: 55px; height: 55px"></sa-image>
			<div class="title" style="font-weight: bold;">{{ compData.data?.left?.title }}</div>
		</div>
		<div class="box-item sa-flex-1 sa-flex-col sa-col-center">
			<div class="box sa-flex sa-row-center"  style="width: 55px; height: 55px">
				<sa-image :url="compData.data?.center?.src|| '/static/icon/hj.gif'" 
					fit="contain" radius="0" :suffix="null" style="width: 100px; height: 100px"></sa-image>
			</div>
			<div class="title" style="font-weight: bold;">{{ compData.data?.center?.title }}</div>
		</div>
		<div class="box-item sa-flex-1 sa-flex-col sa-col-center">
			<sa-image :url="compData.data?.right?.src" fit="contain" radius="0" :suffix="null" style="width: 55px; height: 55px"></sa-image>
			<div class="title" style="font-weight: bold;">{{ compData.data?.right?.title }}</div>

		</div>
	</div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";

const props = defineProps(['compData']);

onMounted(()=>{
  console.log(props.compData)
})
</script>

<style lang="scss" scoped>
.image-block {
  overflow: hidden;
  .sa-image {
    height: 100%;
  }
}
</style>
